<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="object-inspector.html">
<link rel="import" href="attributes-inspector.html">
<link rel="import" href="style-inspector.html">
<link rel="import" href="layout-inspector.html">
<link rel="import" href="../core-pages/core-pages.html">

<polymer-element name="element-inspector" vertical layout attributes="selected nobind">
<template>

  <link rel="stylesheet" href="element-inspector.css">

  <core-selector id="tabs" selected="{{tabSelected}}">
    <span>Properties</span>
    <span>Styles</span>
  </core-selector>
  
  <core-pages id="interior" flex selected="{{tabSelected}}">
    <section>
      <object-inspector selected="{{selected}}" dirty="{{dirty}}" nobind="{{nobind}}"></object-inspector>
      <attributes-inspector selected="{{selected}}" dirty="{{dirty}}"></attributes-inspector>
    </section>
    <section>
      <layout-inspector selected="{{selected}}" dirty="{{dirty}}"></layout-inspector>
      <style-inspector selected="{{selected}}" dirty="{{dirty}}"></style-inspector>
    </section>
  </core-pages>

</template>
<script>

Polymer({
  
  tabSelected: 0,
  dirty: 0,
  nobind: false,
  selected: null,

  forceUpdate: function() {
    this.dirty++;
  }

});

</script>

</polymer-element>
